Lerne JavaScript in 10 Minuten

1 September 2025 — Programmiersprache

JavaScript ist eine hochrangige, interpretierte Programmiersprache, die für ihre Vielseitigkeit und weit verbreitete Verwendung in der Webentwicklung bekannt ist. Dieses Tutorial behandelt moderne JavaScript-Funktionen (ES6+), um Ihnen zu helfen, die Sprache schnell zu erlernen.

1. Dein erstes JavaScript-Programm schreiben

Beginnen wir mit einem einfachen Programm. Erstelle eine Datei namens hello.js und gib folgenden Code ein:

console.log("Hello, World!");

Speichere die Datei und führe folgenden Befehl im Terminal oder in der Befehlszeile aus:

node hello.js

Oder füge es in eine HTML-Datei ein:

<script>
  console.log("Hello, World!");
</script>

Die Ausgabe wird sein:

Hello, World!

Dieses einfache Programm demonstriert die grundlegende Ausgabefunktionalität von JavaScript. Die Funktion console.log() wird verwendet, um Textinformationen in der Konsole anzuzeigen.

2. Grundlegende Syntax

Die Syntax von JavaScript ähnelt anderen C-ähnlichen Sprachen. Es verwendet Semikolons zum Beenden von Anweisungen und geschweifte Klammern {} zum Definieren von Codeblöcken.

// Dies ist ein einzeiliger Kommentar
console.log("Hello, World!");

/*
Dies ist ein mehrzeiliger Kommentar,
der sich über mehrere Zeilen erstreckt.
*/

Grundlegende Syntaxregeln in JavaScript:

Semikolons: Optional, aber empfohlen zum Beenden von Anweisungen
Kommentare: Einzeilige Kommentare beginnen mit //, mehrzeilige mit /* */
Groß-/Kleinschreibung: JavaScript unterscheidet zwischen Groß- und Kleinschreibung
Codeblöcke: Werden durch geschweifte Klammern {} definiert

3. Variablen und Datentypen

In JavaScript werden Variablen mit let, const oder var deklariert. Modernes JavaScript bevorzugt let und const.

Variablendeklaration:

let name = "John"; // Veränderliche Variable
const age = 25;     // Unveränderliche Konstante
var oldWay = "deprecated"; // Vermeide die Verwendung von var

Hauptdatentypen in JavaScript:

Number: 42, 3.14, -10
String: "hello", 'world', `template`
Boolean: true, false
Undefined: undefined (Variable deklariert, aber nicht zugewiesen)
Null: null (bewusste Abwesenheit eines Werts)
Object: {key: "value"}, [1, 2, 3]
Symbol: Symbol("description") (ES6+)
BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Number-Typ

JavaScript verwendet 64-Bit-Gleitkommazahlen für alle numerischen Werte.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 String-Typ

Strings können mit einfachen Anführungszeichen, doppelten Anführungszeichen oder Template-Literalen erstellt werden.

let single = 'String mit einfachen Anführungszeichen';
let double = "String mit doppelten Anführungszeichen";
let template = `Template-Literal`;

// Template-Literale mit Interpolation
let name = "Alice";
let greeting = `Hallo, ${name}!`; // "Hallo, Alice!"

String-Operationen:

let text = "JavaScript-Programmierung";
console.log(text.length);        // String-Länge: 22
console.log(text.toUpperCase()); // "JAVASCRIPT-PROGRAMMIERUNG"
console.log(text.toLowerCase()); // "javascript-programmierung"
console.log(text[0]);            // Erstes Zeichen: "J"
console.log(text.slice(0, 10)); // "JavaScript"

3.3 Boolean-Typ

Der Boolean-Typ hat zwei Werte: true und false.

let isActive = true;
let isComplete = false;

// Boolesche Operationen
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined und Null

undefined bedeutet, dass eine Variable deklariert, aber kein Wert zugewiesen wurde. null ist eine bewusste Abwesenheit eines Werts.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("Variable nicht definiert");
}

if (empty === null) {
  console.log("Wert ist null");
}

4. Datenstrukturen

4.1 Array

Arrays sind geordnete, veränderbare Sammlungen von Werten.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // Element hinzufügen: [1, 2, 3, 4, 5, 6]
numbers.pop();          // Letztes Element entfernen: [1, 2, 3, 4, 5]
numbers.unshift(0);     // Am Anfang hinzufügen: [0, 1, 2, 3, 4, 5]
numbers.shift();        // Erstes Element entfernen: [1, 2, 3, 4, 5]
numbers[0] = 10;        // Ändern: [10, 2, 3, 4, 5]

Array-Methoden:

let fruits = ["Apfel", "Banane", "Orange"];

// Iteration
fruits.forEach(fruit => console.log(fruit));

// Transformation
let lengths = fruits.map(fruit => fruit.length); // [5, 6, 6]

// Filterung
let longFruits = fruits.filter(fruit => fruit.length > 5); // ["Banane", "Orange"]

// Suche
let hasApple = fruits.includes("Apfel"); // true
let bananaIndex = fruits.indexOf("Banana"); // 1

4.2 Object

Objekte sind Sammlungen von Schlüssel-Wert-Paaren.

let person = {
  name: "John",
  age: 30,
  city: "New York",
  isStudent: false
};

// Auf Eigenschaften zugreifen
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// Eigenschaften hinzufügen
person.country = "USA";
person["occupation"] = "Entwickler";

// Eigenschaften entfernen
delete person.isStudent;

// Objektmethoden
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "New York", "USA", "Entwickler"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

Sets sind Sammlungen eindeutiger Werte.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Set-Operationen
numbers.add(6);       // Wert hinzufügen
numbers.delete(1);    // Wert entfernen
numbers.has(2);       // true
numbers.size;         // 5

// Iteration
numbers.forEach(num => console.log(num));

4.4 Map

Maps sind Sammlungen von Schlüssel-Wert-Paaren mit jedem Datentyp als Schlüssel.

let map = new Map();
map.set("name", "Alice");
map.set(1, "Nummer eins");
map.set(true, "Boolescher Wahrheitswert");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// Iteration
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. Operatoren

JavaScript bietet verschiedene Operatoren für Berechnungen und Vergleiche.

Arithmetisch: +, -, *, /, %, ** (Potenzierung)
Vergleich: ==, ===, !=, !==, >, <, >=, <=
Logisch: &&, ||, !
Zuweisung: =, +=, -=, *=, /=, %=
Ternär: Bedingung ? Ausdruck1 : Ausdruck2

5.1 Arithmetische Operatoren

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 Vergleichsoperatoren

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (strikte Gleichheit)
console.log(x != y);    // true
console.log(x !== y);   // true (strikte Ungleichheit)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 Logische Operatoren

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. Kontrollfluss

6.1 if-Anweisungen

let age = 20;

if (age >= 18) {
  console.log("Erwachsen");
} else if (age >= 13) {
  console.log("Jugendlich");
} else {
  console.log("Kind");
}

6.2 switch-Anweisung

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Wochenanfang");
    break;
  case "Friday":
    console.log("Fast Wochenende");
    break;
  default:
    console.log("Normaler Tag");
}

6.3 for-Schleifen

// Traditionelle for-Schleife
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...of-Schleife (Arrays, Strings)
let fruits = ["Apfel", "Banane", "Orange"];
for (let fruit of fruits) {
  console.log(fruit);
}

// for...in-Schleife (Objekteigenschaften)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 while-Schleifen

// while-Schleife
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// do...while-Schleife
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break und continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Schleife verlassen
  }
  if (i % 2 === 0) {
    continue; // Gerade Zahlen überspringen
  }
  console.log(i); // 1, 3
}

7. Funktionen

Funktionen sind wiederverwendbare Codeblöcke.

7.1 Funktionsdeklaration

function greet(name) {
  return `Hallo, ${name}!`;
}

console.log(greet("Alice")); // "Hallo, Alice!"

7.2 Funktionsausdrücke

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 Pfeilfunktionen (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `Hallo, ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "Hallo, Bob!"

7.4 Standardparameter

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 Rest-Parameter

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 Spread-Operator

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "New York"}; // {name: "John", age: 30, city: "New York"}

8. Klassen und Objekte (ES6+)

8.1 Klassendeklaration

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Ich bin ${this.name}, ${this.age} Jahre alt`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} hat Geburtstag, jetzt ${this.age} Jahre alt`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "Ich bin John, 25 Jahre alt"
console.log(person.haveBirthday());   // "John hat Geburtstag, jetzt 26 Jahre alt"

8.2 Vererbung

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} macht ein Geräusch`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "Hund");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} bellt`;
  }

  fetch() {
    return `${this.name} holt den Ball`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy bellt"
console.log(dog.fetch());     // "Buddy holt den Ball"

8.3 Getter und Setter

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. Asynchrones JavaScript

9.1 Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("Daten empfangen");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Daten empfangen" nach 1 Sekunde
});

9.2 Promises

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Daten empfangen");
      // reject("Fehler aufgetreten");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "Daten empfangen"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "Daten empfangen"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Fehler:', error);
  }
}

10. Fehlerbehandlung

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("Division durch Null");
  }
  console.log(result);
} catch (error) {
  console.error("Fehler:", error.message);
} finally {
  console.log("Dies wird immer ausgeführt");
}

11. Module (ES6+)

11.1 Exportieren

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 Importieren

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. Moderne JavaScript-Funktionen

12.1 Destrukturierung

// Array-Destrukturierung
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// Objekt-Destrukturierung
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// Funktionsparameter-Destrukturierung
function greet({name, age}) {
  return `Hallo ${name}, du bist ${age} Jahre alt`;
}

12.2 Template-Literale

let name = "Alice";
let age = 25;

// Grundlegende Interpolation
let greeting = `Hallo, ${name}!`;

// Mehrzeilige Strings
let message = `
  Name: ${name}
  Alter: ${age}
  Status: ${age >= 18 ? "Erwachsen" : "Minderjährig"}
`;

// Ausdrucksauswertung
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 Optional Chaining (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "New York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "New York"
console.log(user?.employment?.company);     // undefined (kein Fehler)

12.4 Nullish Coalescing (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "Unbekannt");    // "Unbekannt" (leerer String ist falsy)
console.log(name ?? "Unbekannt");    // "" (nur null/undefined)

console.log(age || 18);           // 18 (0 ist falsy)
console.log(age ?? 18);           // 0 (nur null/undefined)

console.log(city ?? "Unbekannt");   // "Unbekannt"
console.log(country ?? "USA");    // "USA"

13. Nützliche Array-Methoden

let numbers = [1, 2, 3, 4, 5];

// map: Jedes Element transformieren
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: Elemente auswählen
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: Werte akkumulieren
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: Erstes passendes Element finden
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: Prüfen, ob ein Element passt
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: Prüfen, ob alle Elemente passen
let allPositive = numbers.every(n => n > 0); // true

// sort: Elemente sortieren
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. Datum und Zeit

let now = new Date();
console.log(now.toString());      // Aktuelles Datum und Uhrzeit
console.log(now.getFullYear());   // Aktuelles Jahr
console.log(now.getMonth());      // Aktueller Monat (0-11)
console.log(now.getDate());       // Aktueller Tag (1-31)
console.log(now.getHours());      // Aktuelle Stunde (0-23)

// Datumsformatierung
console.log(now.toLocaleDateString()); // Lokalisierter Datumsstring
console.log(now.toLocaleTimeString()); // Lokalisierter Zeitstring
console.log(now.toISOString());        // ISO-Format-String

// Spezifische Daten erstellen
let specificDate = new Date(2025, 0, 1); // 1. Januar 2025
let timestamp = new Date(1640995200000); // Von Timestamp

15. Reguläre Ausdrücke

let text = "Hallo, meine E-Mail ist [email protected] und meine Telefonnummer ist 123-456-7890";

// E-Mail-Pattern
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// Telefon-Pattern
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// Test-Methode
let isValidEmail = emailPattern.test("[email protected]"); // true

// Replace-Methode
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript ist eine leistungsstarke und vielseitige Sprache, die sich ständig weiterentwickelt. Dieses Tutorial deckt die wesentlichen Konzepte ab, um Ihnen den Einstieg zu erleichtern, aber es gibt noch viel mehr zu entdecken, einschließlich fortgeschrittener Themen wie Generatoren, Proxys und Web-APIs.